<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        background-color: #01A3D2;
    }
    .box {
        width: 350px;
        height: 350px;
        margin: 100px;
        border: 1px solid #ccc;
        position: relative;
    }
    .big {
        width: 400px;
        height: 400px;
        position: absolute;
        top: 0;
        left: 360px;
        overflow: hidden;
        border: 1px solid #ccc;
        display: none;
    }
    .mask {
        width: 175px;
        height: 175px;
        background: rgba(255, 255, 0, 0.4);
        position: absolute;
        top: 0px;
        left: 0px;
        cursor: move;
        display: none;
    }
    .explain{
        text-align: center;
        color:white;
    }
</style>
<body>
<div class="box" id="box">
    <div class="small">
        <!--图片-->
        <img src="img/magnifier_images/big.jpg" width="350" class="imgCenter" alt=""/>
        <div class="mask"></div>
    </div>
    <div class="big">
        <img src="img/magnifier_images/big.jpg" width="800" alt=""/>
    </div>
</div>
<div class = "explain">
    <h1>放大镜</h1>
    <p>将鼠标放到美女上面会得到放大效果</p>
    <p>用到的知识点就是按大小图的大小比例移动大图的margin值</p>
</div>

<script>
    //1、获取页面元素
    var box = document.getElementById("box");
    var small = box.children[0];
    var img = small.children[0];
    var mask = small.children[1];
    var big = box.children[1];
    var imgbig = big.children[0];
    //2、鼠标移入smallBox时显示黄盒子和右面的大盒子
    small.onmouseover = function(e){
        mask.style.display = "block";
        big.style.display = "block";

    }
    small.onmouseout = function(e){
        mask.style.display = "none";
        big.style.display = "none";
    }
      small.onmousemove = function(e){
        //获取鼠标在盒子的位置
        var x = e.clientX-100-mask.offsetWidth/2;
        var y = e.clientY-100-mask.offsetHeight/2;
        if(x<0){
            x=0;
        }
        if(x>small.offsetWidth-mask.offsetWidth){
            x=small.offsetWidth-mask.offsetWidth;
        }
        if(y<0){
            y=0;
        }
        if(y>small.offsetHeight-mask.offsetHeight){
            y=small.offsetHeight-mask.offsetHeight;
        }
        //让mask跟随鼠标移动
        mask.style.left = x+"px";
        mask.style.top = y+"px";
          var biliy = imgbig.offsetHeight/small.offsetHeight;
        // alert( biliy);
        imgbig.style.marginLeft = -x*biliy+"px";
        imgbig.style.marginTop = -y*biliy+"px";
    }

</script>

</body>
</html>